<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="clubSystem" id="personalCenter">
    <div class="clubSystemHead clear" style="height: 50px;">
        <div>个人中心</div>
    </div>
    <hr>
    <div class="clubSystemBody clear">
        <div class="clubs-section" style="display: flex; flex-wrap: wrap;">
            <h3 style="width: 100%;">我的社团</h3>
            <div class="card" style="width: 15rem;margin: 10px" v-for="club in paginatedClubData" :key="club.clubId">
                <img :src="'img/'+club.clubHead" class="card-img-top" style="height: 210px">
                <div class="card-body">
                    <h5 class="card-title">{{ club.clubName }}</h5>
                    <a :href="'person.html?clubId='+club.clubId" class="btn btn-primary" style="background-color: #B60004" target="_blank">查看</a>
                </div>
            </div>
        </div>
        <div class="activities-section" style="clear: both;">
            <h3>我的活动</h3>
            <div class="content" v-for="activity in paginatedActivityList" :key="activity.activityId">
                <div class="activity-item">
                    <img :src="'activityImg/'+activity.activityHead" alt="活动图片">
                    <div class="activity-info">
                        <h5 class="card-title"><strong>{{ activity.activityName }}</strong></h5>
                        <p><strong>举办社团:</strong> {{ clubInfoMap[activity.clubId]?.clubName || '未知' }}</p>
                        <p><strong>活动地点:</strong> {{ activity.activityLocation }}</p>
                        <p><strong>活动时间:</strong> <font size="2px">{{ activity.startTime }} - {{ activity.endTime }}</font></p>
                        <p class="p"><strong>活动状态:</strong> {{ getActivityStatus(activity) }}</p>
                        <button class="btn btn-primary" @click="goToActivityDetail(activity.activityId)" :disabled="getActivityStatus(activity) !== '进行中'">活动详情</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <ul class="pagination">
        <li :class="{ disabled: currentPage === 1 }">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        </li>
        <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
            <button @click="changePage(page)">{{ page }}</button>
        </li>
        <li :class="{ disabled: currentPage === totalPages }">
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </li>
    </ul>
</div>
</body>
</html>
<style type="text/css">
    .clubSystem {
        width: 1100px;
        margin: auto;
    }
    .clubSystemHead > div:first-child {
        float: left;
        font-size: 20px;
        font-weight: bold;
        line-height: 50px;
    }
    .clubSystemHead > div:last-child {
        float: right;
    }
    .clubSystemBody {
        padding: 20px;
    }
    .center {
        transform: translateY(-50%);
        position: relative;
        top: 50%;
    }
    /* 去浮动 */
    .clear:after {
        content: "";
        display: block;
        clear: both;
    }
    .pagination li {
        list-style-type: none;
        display: inline-block;
        margin-right: 5px;
    }
    .pagination button {
        border: none;
        background-color: #f8f9fa;
        color: #007bff;
        padding: 5px 10px;
        cursor: pointer;
    }
    .pagination button:hover {
        background-color: #e9ecef;
    }
    .pagination .active button {
        background-color: #007bff;
        color: white;
    }
    .pagination .disabled button {
        background-color: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
    }

    /* 活动列表样式 */
    .content {
        width: 24%;
        float: left;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 20px;
    }

    .activity-item {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }

    .activity-item img {
        width: 100%;
        height: auto;
    }

    .activity-info {
        padding: 10px;
    }

    .p {
        padding-right: 10px; /* 段落内部右边距 */
    }
</style>
<script>
    $(function() {
        let app = new Vue({
            el: "#personalCenter",
            data: {
                currentPage: 1,
                itemsPerPage: 8,
                clubData: [], // 社团数据
                totalItems: 0, // 总项目数
                maxPage: 0,
                activityList: [], // 活动数据
                clubInfoMap: {}, // 社团信息映射
                currentTime: new Date().toISOString(),
                currentStatus: null // 当前选中的状态
            },
            computed: {
                totalPages() {
                    return Math.ceil(this.totalItems / this.itemsPerPage);
                },
                paginatedClubData() {
                    const start = (this.currentPage - 1) * this.itemsPerPage;
                    const end = start + this.itemsPerPage;
                    return this.clubData.slice(start, end);
                },
                paginatedActivityList() {
                    const start = (this.currentPage - 1) * this.itemsPerPage;
                    const end = start + this.itemsPerPage;
                    return this.activityList.slice(start, end);
                }
            },
            methods: {
                changePage(page) {
                    if (page < 1 || page > this.totalPages) {
                        return;
                    }
                    this.currentPage = page;
                    this.loadClub();
                    this.loadActivities();
                },
                updatePagination(data) {
                    console.log("Received data:", data);
                    this.clubData = data;
                    this.totalItems = data.length;
                    this.maxPage = Math.ceil(this.totalItems / this.itemsPerPage);
                },
                fetchClubInfo(clubId) {
                    if (this.clubInfoMap[clubId]) {
                        return;
                    }
                    $.ajax({
                        url: `activity/${clubId}`,
                        type: "get",
                        dataType: "json",
                        success: (clubInfo) => {
                            this.$set(this.clubInfoMap, clubId, clubInfo);
                        }
                    });
                },
                getActivityStatus(activity) {
                    const now = new Date(this.currentTime);
                    const startTime = new Date(activity.startTime);
                    const endTime = new Date(activity.endTime);
                    const oneDay = 24 * 60 * 60 * 1000; // 一天

                    if (now < startTime - oneDay) {
                        return "未开始";
                    } else if (now >= startTime - oneDay && now < startTime) {
                        return "准备中";
                    } else if (now >= startTime && now <= endTime) {
                        return "进行中";
                    } else {
                        return "已结束";
                    }
                },
                goToActivityDetail(activityId) {
                    window.location.href = `entervalidatecode.html?activityId=${activityId}`;
                },
                loadClub() {
                    $.ajax({
                        url: "club/myclub",
                        type: "get",
                        dataType: "json",
                        success: (req) => {
                            this.updatePagination(req);
                        },
                        error: (xhr, status, error) => {
                            console.error("Error loading clubs:", xhr.responseText);
                        }
                    });
                },
                loadActivities() {
                    $.ajax({
                        url: "activity/myactivity",
                        type: "get",
                        dataType: "json",
                        success: (data) => {
                            this.activityList = data;
                            this.activityList.forEach(activity => {
                                this.fetchClubInfo(activity.clubId);
                            });
                        }
                    });
                }
            },
            mounted() {
                this.loadClub();
                this.loadActivities();
            }
        });
    });
</script>